<template>
  <div class="buttom-box">
    <div class="bottom-item1">
      <div class="bottom-item0"></div>
      <div
        class="button itembut1"
        @mouseover="changeColor(5)"
        @mouseout="restoreColor(5)"
        @click="sendDataToParent5"
        :style="{ cursor: cursorStyle5 }"
        v-if="a === 2"
      >
        <div class="textbu-item" :style="{ color: textColor5 }">智慧设备</div>
      </div>
      <div
        class="button itembut1"
        @mouseover="changeColor(6)"
        @mouseout="restoreColor(6)"
        @click="sendDataToParent6"
        :style="{ cursor: cursorStyle6 }"
        v-if="a === 2"
      >
        <div class="textbu-item" :style="{ color: textColor6 }">物联网</div>
      </div>
      <div
        class="button itembut1"
        @mouseover="changeColor(7)"
        @mouseout="restoreColor(7)"
        @click="sendDataToParent7"
        :style="{ cursor: cursorStyle7 }"
        v-if="a === 2"
      >
        <div class="textbu-item" :style="{ color: textColor7 }">消防感知</div>
      </div>
    </div>
    <div class="bottom1">
      <div
        class="button button1"
        :class="{ 'button1-1': a === 1 }"
        @mouseover="changeColor(1)"
        @mouseout="restoreColor(1)"
        @click="sendDataToParent1"
        :style="{ cursor: cursorStyle1 }"
      >
        <div class="textbu" :style="{ color: textColor1 }">数字党建</div>
      </div>
      <div
        class="button button2"
        :class="{ 'button2-1': a === 1 }"
        @mouseover="changeColor(2)"
        @mouseout="restoreColor(2)"
        @click="sendDataToParent2"
        :style="{ cursor: cursorStyle2 }"
      >
        <div class="textbu" :style="{ color: textColor2 }">事件调度</div>
        <!-- <el-popover
        placement="top"
        trigger="hover"
        popper-class="pop"
        :width="500"
      >
        <div class="text-popbox">
          <div class="popover-text">智能设备</div>
          <div class="popover-text">物联网</div>
          <div class="popover-text">消防感知</div>
        </div>
        <template #reference>
          <div class="textbu" :style="{ color: textColor2 }">事件调度</div>
        </template>
      </el-popover> -->
      </div>
      <div
        class="button button3"
        :class="{ 'button3-1': a === 1 }"
        @mouseover="changeColor(3)"
        @mouseout="restoreColor(3)"
        @click="sendDataToParent3"
        :style="{ cursor: cursorStyle3 }"
      >
        <div class="textbu" :style="{ color: textColor3 }">数字产业</div>
      </div>
      <div
        class="button button4"
        :class="{ 'button4-1': a === 1 }"
        @mouseover="changeColor(4)"
        @mouseout="restoreColor(4)"
        @click="sendDataToParent4"
        :style="{ cursor: cursorStyle4 }"
      >
        <div class="textbu" :style="{ color: textColor4 }">人房管理</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cursorStyle1: "default",
      textColor1: "white",
      cursorStyle2: "default",
      textColor2: "white",
      cursorStyle3: "default",
      textColor3: "white",
      cursorStyle4: "default",
      textColor4: "white",
      cursorStyle5: "default",
      textColor5: "white",
      cursorStyle6: "default",
      textColor6: "white",
      cursorStyle7: "default",
      textColor7: "white",
      a: 0,
    };
  },
  emits: ["sendData"],
  mounted() {},
  methods: {
    sendDataToParent1() {
      this.a = 1;
      this.$emit("sendData", "数字党建"); // 触发自定义事件并传递数据
    },
    sendDataToParent2() {
      this.a = 2;
      this.$emit("sendData", "事件调度"); // 触发自定义事件并传递数据
    },
    sendDataToParent3() {
      this.a = 3;
      this.$emit("sendData", "数字产业"); // 触发自定义事件并传递数据
    },
    sendDataToParent4() {
      this.a = 4;
      this.$emit("sendData", "柏林工业园"); // 触发自定义事件并传递数据
    },
    sendDataToParent5() {
      this.a = 5;
      this.$emit("sendData", "智能设备"); // 触发自定义事件并传递数据
    },
    sendDataToParent6() {
      this.a = 6;
      this.$emit("sendData", "物联网"); // 触发自定义事件并传递数据
    },
    sendDataToParent7() {
      this.a = 7;
      this.$emit("sendData", "消防感知"); // 触发自定义事件并传递数据
    },
    changeColor(number) {
      if (number === 1) {
        this.textColor1 = "aqua";
        this.cursorStyle1 = "pointer";
      } else if (number === 2) {
        this.textColor2 = "aqua";
        this.cursorStyle2 = "pointer";
      } else if (number === 3) {
        this.textColor3 = "aqua";
        this.cursorStyle3 = "pointer";
      } else if (number === 4) {
        this.textColor4 = "aqua";
        this.cursorStyle4 = "pointer";
      } else if (number === 5) {
        this.textColor5 = "aqua";
        this.cursorStyle5 = "pointer";
      } else if (number === 6) {
        this.textColor6 = "aqua";
        this.cursorStyle6 = "pointer";
      } else if (number === 7) {
        this.textColor7 = "aqua";
        this.cursorStyle7 = "pointer";
      }
    },
    restoreColor(number) {
      if (number === 1) {
        this.textColor1 = "aliceblue"; // 还原为原来的颜色
      } else if (number === 2) {
        this.textColor2 = "aliceblue";
      } else if (number === 3) {
        this.textColor3 = "aliceblue";
      } else if (number === 4) {
        this.textColor4 = "aliceblue";
      } else if (number === 5) {
        this.textColor5 = "aliceblue";
      } else if (number === 6) {
        this.textColor6 = "aliceblue";
      } else if (number === 7) {
        this.textColor7 = "aliceblue";
      }
    },
  },
};
</script>
<style scoped>
.buttom-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 7rem;
}
.bottom-item0 {
  height: 2.375rem;
}
.bottom-item1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 14rem;
}
.bottom1 {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.button1 {
  width: 9.375rem;
  height: 3.125rem;
  background: url("../assets/党建.png") no-repeat center;
  /* background-image: url("../assets/党建.png") cover; */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.button1-1 {
  width: 9.375rem;
  height: 3.125rem;
  background: url("../assets/数字党建2.png") no-repeat center;
  /* background-image: url("../assets/党建.png") cover; */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.button2 {
  width: 9.375rem;
  height: 3.125rem;
  background-image: url("../assets/事件调度.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.button2-1 {
  width: 9.375rem;
  height: 3.125rem;
  background-image: url("../assets/事件调度2.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.button3 {
  width: 9.375rem;
  height: 3.125rem;
  background-image: url("../assets/数字产业.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.button3-1 {
  width: 9.375rem;
  height: 3.125rem;
  background-image: url("../assets/数字产业2.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.button4 {
  width: 9.375rem;
  height: 3.125rem;
  background-image: url("../assets/人房管理.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.button4-1 {
  width: 9.375rem;
  height: 3.125rem;
  background-image: url("../assets/人房管理2.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.itembut1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7.5rem;
  height: 2.375rem;
  background-image: url("../assets/智能设备.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
.button {
  margin-right: 1.7rem;
}
.textbu {
  margin-left: 3.5rem;
  font-size: 1.2rem;

  font-weight: 500;
  color: #ffffff;
  line-height: 3.5rem;
  text-shadow: 0px 1px 7px #001f2a;
}
.textbu-item {
  font-size: 1.2rem;

  font-weight: 500;
  color: #ffffff;
  line-height: 3.5rem;
  text-shadow: 0px 1px 7px #001f2a;
}
.text-popbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
/* .popover-text {
  margin-right: 3rem;
  font-size: 1.2rem;
   
  font-weight: 500;
  color: #ffffff;
  line-height: 3.5rem;
  text-shadow: 0px 1px 7px #001f2a;
  width: 7.5rem;
  height: 2.375rem;
  text-align: center;
  background-image: url("../assets/智能设备.png");
  background-size: 100% 100%;
  background-size: cover;
  background-repeat: no-repeat;
} */
.button:last-child {
  margin-right: 0;
}
/* .pop {
  width: 15rem;
  --el-bg-color-overlay: transparent;
  --el-border-color-lighter: transparent;
} */
</style>